<template>
	<view class="lz-drawer">
		<uni-drawer v-if="userInfo" ref="unidrawer" @change="changeDrawer" :width="300" >
			<view class="lz-drawer">
				<view class="lz-drawer-title">
					<view class="title-left">
						<view class="l-title">{{computedUserInfo(0)||'未设置'}}</view>
						<view class="l-mask">
							<view>{{userInfo&&JSON.parse(userInfo).organization?JSON.parse(userInfo).organization.orgName:''}}</view>
							<view class="mask-tag mask-tag-warning">
								<uni-icons type="help-filled" size="12" color="#fc602d"></uni-icons>
								<text>未认证</text>
							</view>
						</view>
					</view>
					<u-avatar v-if="JSON.parse(userInfo).photo" :src="GLOBAL.image_svr+JSON.parse(userInfo).photo" mode="circle" size="160" @click="clickHeader"></u-avatar>
					<view class="title-right" v-else  @click="clickHeader">{{computedUserInfo(1)}}</view>
				</view>
				<view class="lz-input-seach">
					添加工作状态...
				</view>
				<uni-list>
					<uni-list-item v-for="(item,index) in ulist" :key="index" :title="item.title" :show-arrow="true" :showExtraIcon="true" :extraIcon="item.extraIcon" @click="navgetTo(item)"></uni-list-item>
				</uni-list>
				<view class="lz-drawer-foot" @click="actionSheetTap">
					<uni-icons type="spinner-cycle" size="22" color="#fc602d"></uni-icons>
					<view>{{APPTheme=='theme-light'?'浅色':'深色'}}</view>
				</view>
			</view>
		</uni-drawer>
		
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['APPTheme','userInfo','api']),
			computedUserInfo(){
				return (type)=>{
					let user=''
					if(this.userInfo&&type==1){
						let name=JSON.parse(this.userInfo).name
						user=name.slice(name.length-2,name.length);
					}else if(this.userInfo&&type==0){
						user=JSON.parse(this.userInfo).name
					}
					return user
				}
			}
		},
		data() {
			return {
				ulist:[{
					title:'我的名片',
					extraIcon:{
						color: '#4cd964',
						size: '24',
						type: 'contact'
					}
				},
				{
					title:'服务大厅',
					extraIcon:{
						color: '#ff9f00',
						size: '22',
						type: 'home-filled'
					}
				},
				{
					title:'收藏',
					extraIcon:{
						color: '#0088fe',
						size: '22',
						type: 'shop'
					}
				},
				{
					title:'邀请',
					extraIcon:{
						color: '#d36e50',
						size: '22',
						type: 'paperplane-filled'
					}
				},
				{
					title:'我的健康码',
					extraIcon:{
						color: '#00b752',
						size: '22',
						type: 'heart'
					}
				},
				{
					title:'设置',
					extraIcon:{
						color: '#51749a',
						size: '22',
						type: 'gear-filled'
					}
				}]
			}
		},
		mounted() {
			that = this
		},
		methods: {
			...mapActions(['set_APPTheme']),
			open(){
				this.$refs.unidrawer.open()
			},
			//抽屉
			changeDrawer(e){
				if(e){
					uni.hideTabBar()
				}else{
					uni.showTabBar()
				}
			},
			//跳转
			navgetTo(item){
				setTimeout(function(){
					if(item.title=='设置'){
						uni.navigateTo({
							url: '../index/setUp/setUp',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				},200)
			},
			//设置主题
			actionSheetTap() {
				uni.showActionSheet({
					title:'选择外观',
					itemList: ['浅色', '深色'],
					success: (e) => {
						if(e.tapIndex==0){
							that.set_APPTheme('theme-light')
							that.setTabbar('theme-light')
							//设置主题颜色
							uni.$lizhao.setThemeColor(that.APPTheme)
						}else{
							that.set_APPTheme('theme-dark')
							that.setTabbar('theme-dark')
							//设置主题颜色
							uni.$lizhao.setThemeColor(that.APPTheme)
						}
					}
				})
			},
			//设置tabber
			setTabbar(type){
				if(type=='theme-light'){
					uni.setTabBarStyle({
					  color: '#909399',
					  selectedColor: '#0faeff',
					  backgroundColor: '#FFFFFF',
					  borderStyle: 'white'
					})
				}else{
					uni.setTabBarStyle({
					  color: '#fff',
					  selectedColor: '#0faeff',
					  backgroundColor: '#000000',
					  borderStyle: 'black'
					})
				}
			},
		}

	}
</script>

<style scoped lang="scss">
.lz-drawer{
	padding: 30px 15px;box-sizing: border-box;height: 100%;
	@include background_color("background_color2");
	@include font_color("font_color1");
	.lz-drawer-title{
		display: flex;justify-content: space-between;
		.title-left{
			font-size: $font_size-20;
			.l-title{
				font-weight: bold;
			}
			.l-mask{
				font-size: $font_size-14;margin: 4px 0;display: flex;align-items: center;
				.mask-tag{
					display: flex;align-items: center;margin-left: 10px;border-radius: 30px;font-size: 12px;padding: 2px 6px;box-sizing: border-box;
					text{
						margin-left: 2px;
					}
				}
				.mask-tag-warning{
					background:#f0f0f0;color: #fc602d;
				}
			}
		}
		.title-right{
			width: 55px;height: 55px;border-radius: 50%;background: $bg-color;display: flex;justify-content: center;align-items: center;color: #fff;font-size: $font_size-18;
		}
	}
	.lz-input-seach{
		width: 100%;background-color: #f3f4f6;color: #bdc1c4;border-radius: 5px;height: 30px;font-size: $font_size-14;margin: 20px 0;display: flex;align-items: center;padding:0 10px;box-sizing: border-box;
	}
	.lz-drawer-foot{
		position: absolute;bottom: 15px;left: 15px;font-size: $font_size-12;display: flex;flex-direction: column;justify-content: center;
	}
}
</style>
